<template>
  <div class="consumption-record-page">
    <div class="content-wrapper">
      <div class="card-container">
        <!-- 卡片头部 -->
        <div class="card-header">
          <i class="el-icon-house" />
          <span>个人账户共济管理</span>
        </div>

        <!-- 消费记录标题 -->
        <div class="record-title">| 个人共济消费记录</div>

        <!-- 消费记录列表 -->
        <div class="record-list">
          <div
            v-for="(record, index) in recordList"
            :key="index"
            class="record-item"
          >
            <div class="record-header">
              <i class="el-icon-heart" style="color: red;" />
              <span>共济人员：{{ record.name }}</span>
              <span class="record-date">{{ record.date }}</span>
            </div>
            <div class="record-content">
              <div class="record-row">
                <span>流水号</span>
                <span>{{ record.serialNo }}</span>
              </div>
              <div class="record-row">
                <span>交易机构</span>
                <span>{{ record.org }}</span>
              </div>
              <div class="record-row">
                <span>共济支付金额</span>
                <span class="amount">{{ record.amount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ConsumptionRecord',
  data() {
    return {
      recordList: [
        {
          name: '刘二林',
          date: '2025-08-17',
          serialNo: '13058220250818007520165409-1305008582121',
          org: '河北省眼科医院(邢台市眼科医院、河北省眼病科...)',
          amount: '1733.3 元'
        },
        {
          name: '刘三林',
          date: '2025-08-17',
          serialNo: '13058220250818007520165409-1305008582121',
          org: '河北省眼科医院(邢台市眼科医院、河北省眼病科...)',
          amount: '22.54 元'
        },
        {
          name: '刘五林',
          date: '2025-08-17',
          serialNo: '13058220250818007520165409-1305008582121',
          org: '河北省眼科医院(邢台市眼科医院、河北省眼病科...)',
          amount: 'xxx 元'
        }
      ]
    }
  },
  methods: {
    // 头部超时回调
    handleTimeout() {
      this.$message.warning('登录超时，即将退出')
      // 可扩展“退出登录”逻辑
    }
  }
}
</script>

<style scoped>
/* 页面整体背景 */
.consumption-record-page {
  height: 100vh;
  background: linear-gradient(to bottom, #409eff, #2f80ed);
  overflow: hidden;
}

/* 内容容器 */
.content-wrapper {
  padding: 20px;
  height: calc(100vh - 60px); /* 减去Header高度 */
  overflow-y: auto;
}

/* 主卡片 */
.card-container {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 0 auto;
  max-width: 600px;
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #409eff;
  padding: 12px 16px;
  border-radius: 8px;
}
.card-header i {
  margin-right: 10px;
  font-size: 20px;
}

/* 消费记录标题 */
.record-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a5fff;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.record-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #1a5fff;
  margin-right: 8px;
}

/* 消费记录列表 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.record-item {
  background-color: #f0f7ff;
  border-radius: 8px;
  padding: 15px;
}
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.record-header i {
  margin-right: 8px;
}
.record-date {
  color: #666;
  font-size: 14px;
}
.record-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.record-row {
  display: flex;
  justify-content: space-between;
  color: #666;
}
.amount {
  color: #1a5fff;
  font-weight: 500;
}
</style>
